<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:sa="http://www.thymeleaf.org/extras/sa-token">

<head th:replace="index::head">

</head>

<body>
	<!-- 导航栏 -->
	<ul class="layui-nav" th:replace="index::nav">

	</ul>

	<div>
		<div style="text-align: center;background-color: hsl(203, 51%, 51%);color: white;height: 150px;">
			<h1 style="padding: 50px">预订记录</h1>
		</div>

		<div>
			<table class="layui-table" lay-even lay-skin="line" lay-size="lg" style="margin: 30px;">
				<colgroup>
					<col width="150">
					<col>
				</colgroup>
				<thead>
					<tr>
						<th>预订编号</th>
						<th>客人姓名</th>
						<th>身份证</th>
						<th>手机号</th>
						<th>预订时间</th>
						<th>创建时间</th>
						<th>房号</th>
						<th>状态</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody>
					<!-- 使用 Thymeleaf 循环渲染列表 -->
					<tr th:each="r : ${reservations}">
						<td th:text="${r.id}"></td>
						<td th:text="${r.guest.name}"></td>
						<td th:text="${r.guest.idCard}"></td>
						<td th:text="${r.guest.phone}"></td>
						<td th:text="${r.bookTime}"></td>
						<td th:text="${r.createAt}"></td>
						<td th:text="${r.room.location}"></td>
						<td th:text="${r.status}"></td>
						<td>
							<!-- 只有当 outTime 为 null 时才显示按钮 -->
							<a th:onclick="|sureCheck(${r.id})|" th:if="${r.status!='已入住' && r.status != '已取消'}"
								class="layui-btn layui-btn-xs layui-btn-danger">确认入住</a>
								<a th:onclick="|offCheck(${r.id})|" th:if="${r.status != '已取消' && r.status != '已入住'}"
								class="layui-btn layui-btn-xs layui-bg-purple">退订</a>
						</td>
					</tr>
				</tbody>
			</table>
		</div>
	</div>

</body>
<script>
	function sureCheck(id) {
		layer.confirm('确定已入住吗？', {
			btn: ['是的', '取消']
		}, function () {
			$.get('/reservation/sure/' + id, function (data) {
				if (data.code === 200) {
					layer.msg('操作OK');
					setTimeout(() => {
						window.location.reload();
					}, 1400);
				}

			})
		}, function () {

		});
	}

	function offCheck(id) {
		layer.confirm('确定退订吗？', {
			btn: ['是的', '取消']
		}, function () {
			$.get('/reservation/off/' + id, function (data) {
				if (data.code === 200) {
					layer.msg('操作OK');
					setTimeout(() => {
						window.location.reload();
					}, 1400);
				}

			})
		}, function () {

		});

	}


</script>

</html>